<template>
  <div class="movieshow">
    <Card :movieData="movieData"></Card>
    <van-tabs v-model="active" swipeable @click="getcinemas">
      <van-tab v-for="index in 5" :key="index" :title="'11月1'+index+'日'" :name="index">
        <cinema-list :cinemas="cinemas" />
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
import Card from '@/components/Card'
import CinemaList from '../../components/CinemaList'
export default {
  data: () => ({
    movieData: {},
    active: 1,
    cinemas: [],
    id: 7
  }),
  created () {
    this.getDate()
    this.getcinemas1()
    this.$store.state.bottomFlag = false
    this.$store.state.topFlag = true
  },
  mounted () {
    // this.$store.state.title = document.querySelector('.title').innerText
    // console.log(document.querySelector('#title'))
  },
  methods: {
    async getDate () {
      const res = await this.$http({
        url: 'ajax/detailmovie?movieId=' + this.$route.params.id
      })
      this.movieData = res.data.detailMovie
    },
    async getcinemas () {
      this.cinemas.push(this.cinemas.shift(1))
    },
    async getcinemas1 () {
      const data = await this.$http.get('ajax/cinemaList?cityId=' + this.$store.state.cityId)
      this.cinemas = data.data.cinemas
    }
  },
  components: {
    Card,
    CinemaList
  }
}
</script>
<style lang="less" scoped>
</style>
